<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心字符雨</title>
    <style>
        body { margin: 0; overflow: hidden; background: black; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        // 画布适配手机屏幕
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        // 爱心参数（自适应屏幕）
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const scale = Math.min(canvas.width, canvas.height) / 40;

        // 生成爱心轮廓点
        let heartPoints = [];
        for (let t = 0; t < 2 * Math.PI; t += 0.01) {
            const x = 16 * Math.pow(Math.sin(t), 3);
            const y = 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t);
            heartPoints.push({
                x: centerX + x * scale,
                y: centerY - y * scale
            });
        }

        // 字符雨类
        class CharRain {
            constructor() {
                this.reset();
                this.speed = 1 + Math.random() * 3;
                this.color = `rgb(${200 + Math.random() * 55}, ${100 + Math.random() * 50}, ${150 + Math.random() * 55})`;
            }
            reset() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.char = "ILOVEUiloveu0123456789"[Math.floor(Math.random() * 18)];
            }
            update() {
                this.y += this.speed;
                if (this.y > canvas.height) this.reset();
            }
            draw() {
                ctx.fillStyle = this.color;
                ctx.font = "16px Arial";
                ctx.fillText(this.char, this.x, this.y);
            }
        }

        // 爱心粒子类
        class HeartParticle {
            constructor() {
                const idx = Math.floor(Math.random() * heartPoints.length);
                const p = heartPoints[idx];
                this.x = p.x + (Math.random() * 21 - 10);
                this.y = p.y + (Math.random() * 21 - 10);
                this.size = 1 + Math.random() * 3;
                this.color = `rgb(255, ${100 + Math.random() * 55}, ${150 + Math.random() * 105})`;
            }
            update() {
                this.x += (Math.random() * 3 - 1);
                this.y += (Math.random() * 3 - 1);
            }
            draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
                ctx.fill();
            }
        }

        // 初始化元素
        const charRains = Array.from({length: 300}, () => new CharRain());
        const particles = Array.from({length: 200}, () => new HeartParticle());

        // 动画循环
        function animate() {
            ctx.fillStyle = 'black';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 绘制字符雨
            charRains.forEach(rain => { rain.update(); rain.draw(); });

            // 绘制爱心轮廓
            ctx.strokeStyle = 'rgb(255, 150, 200)';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(heartPoints[0].x, heartPoints[0].y);
            heartPoints.forEach(p => ctx.lineTo(p.x, p.y));
            ctx.closePath();
            ctx.stroke();

            // 绘制粒子
            particles.forEach(particle => { particle.update(); particle.draw(); });

            // 绘制文字
            ctx.fillStyle = 'rgb(255, 200, 220)';
            ctx.font = "24px Arial";
            const text = "💖 我永远为你着迷";
            const textWidth = ctx.measureText(text).width;
            ctx.fillText(text, centerX - textWidth/2, centerY);

            requestAnimationFrame(animate);
        }
        animate();
    </script>
</body>
</html>